<template>
  <div id="app">
    <navbar v-show="headStatus" :msg="msg"></navbar>

    <transition
      enter-active-class="animated bounceInLeft"
      leave-active-class="animated bounceOutRight"
    >
      <router-view></router-view>
      <!--<keep-alive>-->
      <!--<router-view v-if="$route.meta.keepAlive">-->
      <!--&lt;!&ndash; 这里是会被缓存的视图组件，比如列表A页面 &ndash;&gt;-->
      <!--</router-view>-->
      <!--</keep-alive>-->
      <!--<router-view v-if="!$route.meta.keepAlive">-->
      <!--&lt;!&ndash; 这里是不被缓存的视图组件，比如详情B页面&ndash;&gt;-->
      <!--</router-view>-->
    </transition>
    <!--既然keep-alive组件提供了这么多生命周期函数钩子，那么这些钩子函数具体的执行顺序是怎样的呢？-->
    <!--activated： 缓存的组件再次进入时会触发-->
    <!--deactivated： 缓存的组件离开时会触发-->
    <!--第一次进入keep-alive组件时，其生命周期执行顺序：-->
    <!-- beforeRouteEnter  -> created  -> mounted  ->activated  -> deactivated -->
    <!--非首次进入时，其生命周期执行顺序：-->

    <!-- beforeRouteEnter ->activated -> deactivated -->
    <footerbar v-if="footStatus"></footerbar>
  </div>
</template>

<script>
  import navbar from './components/navbar';
  import home from './components/home';
  import footerbar from './components/footerbar';
  import {mapActions, mapGetters} from 'vuex'

  export default {
    name: 'App',
    data() {
      return {
        msg: '我是header'
      }
    },
    methods: {
      changeRoute(path) {
        if (path == 'articles' || path == 'login' || path == 'scroll') {
          // this.$root.$data.showHead = false;
          this.$store.dispatch('hideHead');
        } else {
          // this.$root.$data.showHead = true;
          this.$store.dispatch('showHead');
          this.$store.dispatch('hideFoot');
        }
      }
    },
    components: {
      navbar, home, footerbar
    },


    mounted() {
      let path = this.$route.path.substr(1);
      this.changeRoute(path);
    },
    watch: {
      $route(to) {
        let path = to.path.substr(1);
        this.changeRoute(path);
      }

    },
    computed: {
      ...mapGetters(['headStatus', 'footStatus'])
    }
  }
</script>


